<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="../../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .btn-login {
            position: absolute;
            left: 20%;
        }

        .btn-resetting {
            position: absolute;
            left: 45%;
        }
        .btn-all-delete{
            position: relative;
            left: 80%;
        }
    </style>
</head>
<body>
<div class="container" id="case-general2">
    <h3>登录</h3>
    <div>
        <form action="#" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">账户</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="手机/邮箱/个人空间地址" v-model="object1.username">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="请输入密码" v-model="object1.userpassword">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">验证</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="请输入验证码" v-model="object1.usercheck">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">记住我
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default col-sm-2 btn-login" v-on:click="add">登录</button>
                    <button type="button" class="btn btn-danger col-sm-2 btn-resetting btn-regist" data-toggle="modal"
                            data-target="#myModal-regist">重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    <table class="table table-bordered table-hover table-responsive">
        <caption>登录列表</caption>
        <thead>
        <tr>
            <th>序列</th>
            <th>账户</th>
            <th>密码</th>
            <th>验证</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(value,key) in usersarr">
            <td>{{key+1}}</td>
            <td>{{value.userName}}</td>
            <td>{{value.userPassword}}</td>
            <td>{{value.userCheck}}</td>
            <td>
                <button class="btn btn-danger" v-on:click="nowindex=key" data-target="#myModal-delete"
                        data-toggle="modal">删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
    <buttom type="button" class="btn btn-danger col-sm-2  btn-all-delete col-sm-4" data-target="#myModal-all-delete"
            data-toggle="modal">全部删除</buttom>
    <!--删除模态框-->
    <div class="modal fade" id="myModal-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                    <h4 class="modal-title">确定需要删除该数据吗？</h4>
                </div>
                <div class="modal-body">
                    <p style="color: darkred">删除后将无法恢复</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="deleteobject">确定
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--全部删除模态框-->
    <div class="modal fade" id="myModal-all-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                    <h4 class="modal-title">确定需要删除该数据吗？</h4>
                </div>
                <div class="modal-body">
                    <p style="color: darkred">删除后将无法恢复</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="AllDeleteObject">确定
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--重置模态框-->
    <div class="modal fade" id="myModal-regist">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                    <h4 class="modal-title">确定需要清空输入的数据吗？</h4>
                </div>
                <div class="modal-body">
                    <p style="color: darkred">清空后将无法恢复</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="resteObject">确定
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    var generalDemo2 = new Vue({
        el: "#case-general2",
        data: {
            nowindex: -1,
            object1: {},
            usersarr: [
                {userName: "1111", userPassword: "1111", userCheck: "askc"},
                {userName: "2222", userPassword: "2222", userCheck: "asks"}
            ]
        },
        methods: {
            add: function () {
                var general2 = {
                    userName: this.object1.username,
                    userPassword: this.object1.userpassword,
                    userCheck: this.object1.usercheck
                }
                generalDemo2.usersarr.push(general2);
            },
            deleteobject: function () {
                generalDemo2.usersarr.splice(generalDemo2.object1.length, 1)
            },
            AllDeleteObject: function () {
                generalDemo2.usersarr.splice(0, generalDemo2.usersarr.length)
            },
            resteObject:function () {
                generalDemo2.object1={}
            }
        }
    })
    console.log(generalDemo2.usersarr)
    console.log(generalDemo2.object1)
</script>
</body>
</html>